<template>
  <div style="margin-bottom: 6.25rem">
    <div class="cardbg">
      <!-- 头像 -->
      <van-image
        class="headpic"
        round
        width="3.7rem"
        height="3.7rem"
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
        fit="cover"
      >
      </van-image>
      <!-- 是否入会,成为会员 -->
      <div class="ifvip">未入会</div>
      <!-- 会员规则 -->
      <div class="viprules">
        会员规则
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-xiangyoujiantou"></use>
        </svg>
      </div>
      <!-- 专享会员卡 -->
      <van-swipe class="lunbo">
        <van-swipe-item style="width: 360px">
          <img style="width: 100%" src="../../assets/wsy10004.png" alt="" />
          <!-- <span>1</span>
        <span>成长值</span> -->
        </van-swipe-item>
        <van-swipe-item>
          <img style="height: 201px" src="../../assets/wsy10003.png" alt="" />
          <!-- <span>1</span>
        <span>成长值</span> -->
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 9.8折  包邮    discount:折扣 -->
    <div class="discount">
      <div>
        <img src="../../assets/wsy10005.png" alt="" />
        <p>9.8折</p>
      </div>
      <div>
        <img src="../../assets/wsy10006.png" alt="" />
        <p>包邮折</p>
      </div>
    </div>
    <!-- 中间空条 -->
    <div class="nan"></div>
    <!-- 成长任务 -->
    <div class="group">
      <span class="order"> 成长任务 </span>
      <span class="lookorder">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-xiangyoujiantou"></use>
        </svg>
      </span>
      <!-- 完善信息 完成订单 购买商品 -->
      <div>
        <div>
          <div class="task-list">
            <div class="missions-list">
              <div class="mission-item">
                <img src="../../assets/wsy10007.png" class="mission-icon" />
                <div class="mission-info">
                  <h4 class="mission-info__title">完善信息</h4>
                  <p class="mission-info__desc">+1成长值</p>
                </div>
                <div class="mission-action">
                  <span class="mission-action__text">去完成</span>
                </div>
              </div>
              <div class="mission-item">
                <img src="../../assets/wsy10008.png" class="mission-icon" />
                <div class="mission-info">
                  <h4 class="mission-info__title">完成下单</h4>
                  <p class="mission-info__desc">每完成1笔订单，获得1点成长值</p>
                </div>
                <div class="mission-action">
                  <span class="mission-action__text">去完成</span>
                </div>
              </div>
              <div class="mission-item">
                <img src="../../assets/wsy10009.png" class="mission-icon" />
                <div class="mission-info">
                  <h4 class="mission-info__title">购买商品</h4>
                  <p class="mission-info__desc">每消费10元获得1点成长值</p>
                </div>
                <div class="mission-action">
                  <span class="mission-action__text">去完成</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="split-border"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.cardbg {
  width: 100%;
  height: 10rem;
  background-color: #252525;
}
.cardbg .headpic {
  margin-left: 1.5rem;
  margin-top: 1rem;
}
.cardbg .ifvip {
  font-size: 0.8125rem;
  color: #969799;
  display: inline-block;
  margin-left: 1rem;
}
.cardbg .viprules {
  font-size: 0.875rem;
  color: #969799;
  margin-left: 18rem;
  margin-top: -3.7rem;
}
.cardbg .viprules .icon {
  width: 0.625rem;
  height: 0.625rem;
  fill: #969799;
}
.cardbg .lunbo {
  margin-left: 0.625rem;
  margin-top: 3.5rem;
  position: relative;
}
.cardbg .lunbo .van-swipe__indicator {
  width: 0;
  bottom: 0;
}
.discount {
  margin-top: 9rem;
  display: flex;
  justify-content: center;
}
.discount img {
  width: 2.5rem;
  height: 2.5rem;
}
.discount p {
  font-size: 0.75rem;
  color: #323233;
}
.discount div {
  margin-left: 2rem;
}
.nan {
  width: 100%;
  height: 0.625rem;
  background-color: #f7f8fa;
}
.group {
  margin: 1rem;
}
.group .order {
  padding: 0.625rem;
  font-weight: 600;
  margin-right: 14rem;
}
.group .lookorder .icon {
  width: 0.8125rem;
  height: 0.8125rem;
  fill: #999;
}
.mission-item img {
  width: 3.125rem;
  height: 3.125rem;
  margin-top: 1.1638rem;
}
.mission-item {
  display: flex;
}
.mission-item h4 {
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
  margin-right: 160px;
}
.mission-item p {
  margin-top: 0.0625rem;
  font-size: 0.75rem;
}
.mission-item span {
  font-size: 0.875rem;
  display: inline-block;
  margin-top: 1.25rem;
  padding: 0.125rem 0.625rem;
  border-radius: 0.9375rem;
  background-color: #e1b365;
  color: #fff;
}
</style>